<template>
  <el-dialog
    v-model="visible"
    :title="`病历详情 - ${record.patientName}`"
    width="900px"
    top="5vh"
  >
    <div class="record-detail-content" v-if="record">
      <!-- 患者基本信息 -->
      <div class="basic-info-section">
        <div class="info-grid">
          <div class="info-item">
            <span class="label">患者姓名：</span>
            <span class="value">{{ record.patientName }}</span>
          </div>
          <div class="info-item">
            <span class="label">病历号：</span>
            <span class="value">{{ record.patientId }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value">{{ record.gender }}</span>
          </div>
          <div class="info-item">
            <span class="label">年龄：</span>
            <span class="value">{{ record.age }}岁</span>
          </div>
          <div class="info-item">
            <span class="label">床号：</span>
            <span class="value">{{ record.bedNumber }}</span>
          </div>
          <div class="info-item">
            <span class="label">科室：</span>
            <span class="value">{{ record.department }}</span>
          </div>
          <div class="info-item">
            <span class="label">主治医生：</span>
            <span class="value">{{ record.doctor }}</span>
          </div>
          <div class="info-item">
            <span class="label">入院日期：</span>
            <span class="value">{{ record.admissionDate }}</span>
          </div>
        </div>
      </div>

      <el-divider />

      <!-- 诊断信息 -->
      <div class="section">
        <h4>诊断信息</h4>
        <p class="diagnosis-text">{{ record.diagnosis }}</p>
      </div>

      <el-divider />

      <!-- 生命体征 -->
      <div class="section">
        <h4>生命体征</h4>
        <div class="vitals-grid">
          <div class="vital-item">
            <span class="vital-label">体温：</span>
            <span class="vital-value">{{ record.vitalSigns.temperature }}°C</span>
          </div>
          <div class="vital-item">
            <span class="vital-label">脉搏：</span>
            <span class="vital-value">{{ record.vitalSigns.pulse }}次/分</span>
          </div>
          <div class="vital-item">
            <span class="vital-label">呼吸：</span>
            <span class="vital-value">{{ record.vitalSigns.respiration }}次/分</span>
          </div>
          <div class="vital-item">
            <span class="vital-label">血压：</span>
            <span class="vital-value">{{ record.vitalSigns.bloodPressure }}mmHg</span>
          </div>
          <div class="vital-item">
            <span class="vital-label">血氧：</span>
            <span class="vital-value">{{ record.vitalSigns.oxygen }}%</span>
          </div>
        </div>
      </div>

      <el-divider />

      <!-- 用药信息 -->
      <div class="section">
        <h4>用药信息</h4>
        <el-table :data="record.medications" size="small" stripe>
          <el-table-column prop="name" label="药品名称" width="120" />
          <el-table-column prop="dosage" label="剂量" width="80" />
          <el-table-column prop="frequency" label="频次" width="100" />
          <el-table-column prop="route" label="给药途径" width="100" />
        </el-table>
      </div>

      <el-divider />

      <!-- 护理记录 -->
      <div class="section">
        <h4>护理记录</h4>
        <p class="nursing-notes">{{ record.nursingNotes }}</p>
      </div>

      <el-divider />

      <!-- 特别注意事项 -->
      <div class="section" v-if="record.specialNotes">
        <h4>特别注意事项</h4>
        <p class="special-notes">{{ record.specialNotes }}</p>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" @click="$emit('edit', record)">编辑病历</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits,computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  record: {
    type: Object,
    default: () => ({
      patientName: '请选择',
      patientId: '',
    })
  }
})

const emit = defineEmits(['update:visible', 'edit'])

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})
</script>

<style lang="scss" scoped>
.record-detail-content {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

.basic-info-section {
  margin-bottom: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  
  .label {
    color: #606266;
    min-width: 80px;
    font-weight: 500;
  }
  
  .value {
    color: #303133;
  }
}

.section {
  margin-bottom: 24px;
  
  h4 {
    margin: 0 0 16px 0;
    color: #303133;
    font-weight: 600;
  }
}

.diagnosis-text,
.nursing-notes,
.special-notes {
  margin: 0;
  line-height: 1.6;
  color: #606266;
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.vital-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  
  .vital-label {
    color: #606266;
    font-weight: 500;
  }
  
  .vital-value {
    font-weight: 600;
    color: #303133;
  }
}

.special-notes {
  padding: 12px;
  background: #fff6f6;
  border-radius: 8px;
  border-left: 4px solid #f56c6c;
  color: #f56c6c;
}

// 响应式设计
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .vitals-grid {
    grid-template-columns: 1fr;
  }
}
</style>